<template>
  <div class="merchant alltable">
    <div class="tabbar">
      <div class="let">
            <Button @click="back" class="btn_default" >
            返回
            </Button> 
        <!-- <DatePicker
          type="date"
          placement="bottom-end"
          v-model="data_axios.startday"
          value = 'yyyy-MM-dd'
          placeholder="请选择开始日期"  
          style="width: 130px"
        ></DatePicker>&nbsp;
        <DatePicker
          type="date"
          placement="bottom-end"
          v-model="data_axios.endday"
          placeholder="请选择结束日期"
          style="width: 130px"
        ></DatePicker>&nbsp;        
        <Input
          prefix="ios-search"          
          v-model.trim="data_axios.selectinfo"
          placeholder="请输入关键字"
          style="width: 200px"
        />
        <Button class="btn_default" @click="search">
          <Icon type="ios-search" size="17" class="icon_wy"/>查询
        </Button> -->
      </div>
        <div class='rit'>               
            <Button @click="sure">确定生成</Button>
      </div>
    </div>
    <div class="tabble">
        <div class="aa"  v-if="te">
        <Table           
          :row-class-name="rowClassName"
          :show-header="false"
          :columns="columns2"
          :loading="loading"          
          :data="data.warninglist"
          no-data-text = ""
          class="sel_table"
        ></Table>
      </div>
      <div>
        <Table
        
          :columns="columns"
          :loading="loading"
          height="480"
          :data="data.datas"
          class="sel_table"
        ></Table>
      </div>
    </div>

    <div class="tab_pages">
      <div>
        <Table
          :show-header="false"
          :columns="columns1"
          :loading="loading"          
          :data="data.all"
          no-data-text = ""
          class="sel_table"
        ></Table>
      </div>
      
    </div>
   
  </div>
</template>
<script>
import { setAdmin, setToken, getAdmin } from "../../../utils/auth.js";
import { settlePreview,addSettle} from "../../../apis/api_system.js";
import filter from './../../../filters/filter';

export default {
  name: "bus_listing",
  data() {
    return {
      userId: "",
      value: "",
      userName:"",
      te:false,
      data: {
        allCount: 0,
        currPage: 1,
        datas: [], 
        all:[],
         warninglist:[]      
      },
      data_axios: {           
      },
      data_chuan:{},
      loading: false,
      Mnamelist: [],
      typelist: [
        {
          mid: 0,
          cname: "商户下单"
        },
        {
          mid: 1,
          cname: "扫码"
        }
      ],
      //   1 2已退款
      billstatuslist: [
        {
          mid: 1,
          cname: "已完成"
        },
        {
          mid: 2,
          cname: "已退款"
        }
      ],
      columns: [
        {
          title: "序号",
          key: "name",
          type: "index",
          align:'center',
        },
        {
          title: "商户名",
          key: "cname"
        },
        {
          title: "商户号",
          key: "mid",
          align:'center',
        },
        
        {
          title: "经营者名",
          key: "mname",
          align:'center',
        },
        {
          title: "金额 ",
          key: "paymentamt",
          align:'center',
        
        },        
        {
          title: "手续费 ",
          key: "poundage",
          align:'center',
        //   ,
        //   width: 100
        },
        {
          title: "费率 ",
          key: "rate",
          align:'center',
        },
        {
          title: "结算金额 ",
          key: "settleamt",
          align:'center',
        },
        {
          title: "结算条数 ",
          key: "settlecount",
          align:'center',
        },
      ],
      columns1: [
        {
          title: "序号",
          key: "name",
           align:'center',
          render: (h, params) => {
            const row = params.row;
            const text = '总计：';
            return <span>{text}</span>;
          }
        },
        
        {
          title: "商户名",
          key: "mid",
           align:'center',
        },
        {
          title: "商户号",
          key: "mid",
           align:'center',
        },
        
        {
          title: "经营者名",
          key: "mname",       
           align:'center',
        },
        {
          title: "金额 ",
          key: "paymentamt",
           align:'center',
        //   ,
        //   width: 100
        },        
        {
          title: "手续费 ",
          key: "poundage",
           align:'center',
        //   ,
        //   width: 100
        },
        {
          title: "费率 ",
          key: "rate",
           align:'center',
        //    width: 200
        },
        {
          title: "结算金额 ",
          key: "settleamt",
           align:'center',
            // width: 150
        },
        {
          title: "结算条数 ",
          key: "settlecount",
          align:'center',
        },       
        
        
      ],
      columns2: [
        {
          title: "序号",
          key: "name",         
          align:'center',
          width:100,
          render: (h, params) => {
            const row = params.row;
            const text = '警告：';
            return <span>{text}</span>;
          }
        },
        {
          title: "商户名",
          key: "cname",
          align:'center',
        },
        {
          title: "商户号",
          key: "mid",
          align:'center',
        },        
        {
          title: "经营者名",
          key: "mname",       
        },
        {
          title: "警告说明 ",
          key: "disp",
          align:'center',        
        }, 
      ],
    };
  },
  
  mounted() {    
    this.data_chuan = this.$route.query.data  ;  
    console.log(this.$route.query.data )
    let info = getAdmin();   
    this.userId = info.id;
    this.userName = info.name;        
    this.settlePreview(this.data_chuan);
  },
  methods: { 
    //   列颜色
      rowClassName (row, index) {
         
        if (index>=0) {
            return 'demo-table-error-row';
        } 
        return '';
    }  ,  
    // 结算单预览 
    settlePreview(info){
        let data = JSON.stringify({
          requestString: JSON.stringify(info),
          userId: this.userId,
          fullname: "结算单列表"
        });
        console.log(data)
        settlePreview(data).then(({ returnString, code, disp}) => {
           if (code == 200) {    
              console.log(JSON.parse(returnString));             
              this.data.datas = JSON.parse(returnString).list;
              this.data.all = JSON.parse(returnString).all;            
              if(JSON.parse(returnString).warninglist.length>0){
                this.data.warninglist = JSON.parse(returnString).warninglist; 
                this.te=true;
              }                          
          }else{
               this.$Message.warning(disp);
          }
        })
        .catch(err => {
            this.$Message.warning('请求出错');
        });
    },
    // sure 结算单生成
    sure(){      
          this.data_chuan.createuser = this.userId;
          this.data_chuan.createusername = this.userName;          
        let data = JSON.stringify({
          requestString: JSON.stringify(this.data_chuan),
          userId: this.userId,
          fullname: "结算单列表"
        });
        console.log(data)
        addSettle(data).then(({ returnString, code, disp}) => {            
          if (code == 200) {    
                this.$Message.success(disp);    
                this.$router.push("/statement_list");                     
          }else{
               this.$Message.warning(disp);
          }
        })
        .catch(err => {
            this.$Message.warning('请求出错');
        });
    },
    back(){
        this.$router.push("/statement_list");
    }
  }
};
</script>
<style>
.ivu-table .demo-table-info-row td{
        background-color: #2db7f5;
        color: #fff;
    }
    .ivu-table .demo-table-error-row td{
        background-color: #f11;
        color: #fff;
    }
    .ivu-table td.demo-table-info-column{
        background-color: #2db7f5;
        color: #fff;
    }
    .ivu-table .demo-table-info-cell-name {
        background-color: #2db7f5;
        color: #fff;
    }
    .ivu-table .demo-table-info-cell-age {
        background-color: #ff6600;
        color: #fff;
    }
    .ivu-table .demo-table-info-cell-address {
        background-color: #187;
        color: #fff;
    }
</style>